<script setup>
import {useMenuStore} from "@/stores/menu.js";
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";


const router = useRouter()
const menuStore = useMenuStore()
const {tabList, activeTab} = storeToRefs(menuStore)

function gotoTab(path) {
  menuStore.setActiveTab(path)
  router.push(path)
}

function closeTab(path) {
  if (path === menuStore.activeTab) {
    menuStore.setActiveTab("/index")
    router.push('/index')
  }
  menuStore.delTabList(path)
}
</script>

<template>
  <el-tabs
      v-model="activeTab"
      type="card"
      closable
      class="demo-tabs"
      @tab-change="gotoTab"
      @tab-remove="closeTab"
  >
    <el-tab-pane
        v-for="item in tabList"
        :key="item.path"
        :label="item.title"
        :name="item.path"
    >
      <RouterView/>
    </el-tab-pane>
  </el-tabs>

</template>

<style scoped>

</style>